<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    .webuploader-pick{
        width: 200px;
    }

</style>

<div style="width: 100%;padding-top: 20px;">
    <p>
        <button class="btn btn-info" onclick="javascript:window.open('./tools/index_tools_2_template.xlsx')">样例模板下载</button>
    </p><br/>

    <div id="i_w_importdoc_attached_div" class="wu-example" style="width: 100%;" >
        <div class="btns" style="margin-left: 40%;">
            <div id="i_w_importdoc_picker">选择附件</div>
        </div>
        <!--用来存放文件信息-->
        <div id="i_w_importdoc_uploadlist" class="uploader-list">

        </div>
        <table class="table">
            <caption>上传附件列表</caption>
            <thead>
            <tr>
                <th>名称</th>
                <th>大小</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="i_w_importdoc_list">

            </tbody>
        </table>
    </div>

    <div id="" style="width: 100%;">

        <button type="button" class="btn btn-success" style="width: 200px;margin-left: 40%;" onclick="tools_0_cf()">执行拆分</button>


    </div>
    <div id="result_content" style="width: 100%;">


    </div>
</div>


<script>
    var upload_file = webrootpath+"file/upload_file"; //上传文件
    var delAttached_link = webrootpath+"doc/delAttached_link"; //删除附件
    var exceletl = webrootpath+"toolsexcel/exceletl";//执行excel内容拆分为多个excel

    $(function () {
        $("#result_content").html("");
        loaduploadify();


    });
    //执行拆分
    function tools_0_cf() {
        var att_name_list = "";
        $("input[name='att_name']").each(function (_index,_this) {
            att_name_list+=","+_this.value;
        });
        if(att_name_list==""){
            alert("请上传附件");
            return false;
        }
        $.post(exceletl,{
            att_name_list:att_name_list
        },function (content) {
            if(content.code=="1"){
                $.alert({content:content.msg});
                $("#result_content").html("<a href='"+content.data+"'>"+content.data+"</a>");
                return false;
            }
        });
    }
    /***
     * 加载上传组件
     */
    function loaduploadify() {
        $("#i_w_importdoc_uploadlist").html("");
        $("#i_w_importdoc_list").html("");

        var uploader = WebUploader.create({
            swf: './webuploader-0.1.5/Uploader.swf',
            auto:true,
            server: upload_file,
            pick: '#i_w_importdoc_picker',
            resize: false,
            fileNumLimit:1,
            formData:{
                filetype:10
            },
            accept:{
                title: '文本内容',
                extensions: 'xlsx',
                mimeTypes: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
            },
            fileSizeLimit:10485760000
        });
        uploader.on( 'fileQueued', function( file ) {

            $("#i_w_importdoc_uploadlist").html( '<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>' );
        });
        uploader.on( 'beforeFileQueued', function( file ) {
            uploader.reset();
        });

        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress .progress-bar');

            if ( !$percent.length ) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo( $li ).find('.progress-bar');
            }

            $li.find('p.state').text('上传中并正在处理，请稍等！！！');
            $percent.css( 'width', percentage * 100 + '%' );
        });
        //上传成功
        uploader.on( 'uploadSuccess', function( file,response ) {
            $( '#'+file.id ).find('p.state').text('上传完毕');

            setTimeout(function(){
                if(response.code=='1'){
                    var htmlstr = "<tr id=\"att"+response.data.attachedid+"\" >"+
                        "<td>"+response.data.truename+"<input name='att_name' value='"+response.data.attachedid+"' style='display: none;' /></td>"+
                        "<td>"+response.data.size+"</td>"+
                        "<td><span class=\"label label-danger\" style='cursor: pointer;'  onclick=\"delAttached('"+response.data.attachedid+"')\">删除</span></td>"+
                        "</tr>";

                    $("#i_w_importdoc_list").append(htmlstr);
                }
                $("#i_w_importdoc_uploadlist").html("");
                uploader.reset();
            },1000);

        });
        uploader.on( 'uploadError', function( file ) {
            $( '#'+file.id ).find('p.state').text('上传出错');
            uploader.reset();
        });
        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').fadeOut();
        });
    }

    /***
     *  删除附件
     */
    function delAttached(attachedid) {
        $.confirm({
            title:"提示",
            content:"您确认删除此附件吗？",
            buttons:{
                "确定":function () {
                    $.get(delAttached_link,{attachedid:attachedid},function (msg) {
                        if (msg.code=='1'){
                            $("#att"+attachedid).remove();
                            $.confirm({
                                title: '提示',
                                content: '成功删除附件！',
                                autoClose: '确定|2000',
                                buttons: {
                                    确定: {
                                    }
                                }
                            });
                        }
                    });
                },
                "取消":function () {

                }
            }
        });
    }
</script>
</body>
</html>